<template>
  <div class="about">
    <el-card class="top-card" shadow="never">
      <img src="../assets/logotext.png" width="200px">
      <p>©&nbsp;2022&nbsp;&nbsp;冰清起始页</p>
    </el-card>
    <br/>
    <span class="content">
      特别鸣谢：<br/>
      <a href="https://cn.vuejs.org/index.html">Vue.js</a><br/>
      <a href="https://element.eleme.cn">Element-UI</a><br/>
      <a href="https://github.com/SortableJS/Sortable">Sortable.js</a><br/>
      <a href="https://space.bilibili.com/294832787">B站UP主：Chemistry_残鸢</a>
      <br/><br/>
      有任何建议请发邮件或B站私信联系我：<br/>
      邮箱：<a href="mailto:ice-starter@126.com">ice-starter@126.com</a><br/>
      B站：<a href="https://space.bilibili.com/36219054">毅乐_Equent</a>
    </span><br/><br/><br/>

    <div class="block">
      <el-timeline>
        <p style="font-weight: bold">更新日志</p>
        <template v-for="updateLog in logs">
          <el-timeline-item :timestamp="updateLog.date" placement="top">
            <el-card class="box-card">
            <span>
                <span v-for="item in updateLog.content">{{item}}<br/></span>
            </span>
            </el-card>
          </el-timeline-item>
        </template>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import updateLogApi from "@/api/updateLogApi";
export default {
  name: "about",
  data() {
    return {
      logs: []
    }
  },
  mounted() {
    updateLogApi.get().then(
      res => {
        this.logs = res.data.data
      }
    )
  }
}
</script>

<style scoped>
.about {
  text-align: left;
  height: 352px;
  margin-left: 10px;
}
.content a{
  color: #00778c;
  text-decoration: none;
}
.box-card {
  width: 450px;
}
.top-card {
  border: none !important;
  width: 490px;
  text-align: center;
}
</style>

<style>
.el-timeline {
  padding-left: 5px !important;
}
</style>
